<template>
  <div id="app">
    <div class="wrapper" ref="wrapper">
      <div class="content">
        <chatFriends :friendsInfo="friendsInfo"></chatFriends>
      </div>
    </div>
  </div>
</template>

<script>
import chatFriends from "@/components/chatFriends/index.vue";
import BScroll from "better-scroll";
export default {
  name: "",
  data() {
    return {
      friendsInfo: [],
      myId: this.$store.state.yb_userid,
      scroll: null,
    };
  },
  components: {
    chatFriends,
  },
  mounted() {
    // console.log(this.$store.state.yb_usernick)
    this.axios
      .get("http://120.78.199.38:9000/findFriendsList", {
        params: {
          sender: this.myId,
        },
      })
      .then((res) => {
        this.friendsInfo = res.data;
        // console.log(this.friendsInfo);
      });
  },
  watch: {
    friendsInfo: function() {
      this.$nextTick(() => {
        this.scroll = new BScroll(this.$refs.wrapper, {
          mouseWheel: true, //开启鼠标滚轮
          disableMouse: false, //启用鼠标拖动
          disableTouch: false, //启用手指触摸
          click: true,
        });
      });
    },
  },
};
</script>
<style scoped>
#app {
  position: absolute;
  top: 0px;
  bottom: 60px;
  left: 0;
  right: 0;
  width: 100%;
  height: 100vh;
  padding-top: 10px;
   background-image: url("~@/assets/bj2.jpg");
    background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
     background-position: center 0;
}
.wrapper {
  height: 100%;
  width: 100%;
}
.content {
  width: 100%;
}
</style>
